<template>
  <div class="prompt">
    <div class="prompt-icon" v-if="$slots.icon">
      <slot name="icon"></slot>
    </div>
    <div class="prompt-body">
      <div class="prompt__title">{{ title }}</div>
      <div class="prompt__desc" v-if="desc">{{ desc }}</div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  title: String,
  desc: String,
  type: String,
})
</script>
<style lang="scss" scoped>
.prompt {
  padding: 12px 16px;
  // background-color: #f0f0f0;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  display: flex;
}

.prompt-icon {
  margin-right: 12px;
  width: 24px;
  height: 24px;
  img {
    width: 100%;
    height: 100%;
  }
}

.prompt__title {
  // font-weight: bold;
  line-height: 24px;
  font-weight: 500;
}

.prompt__desc {
  margin-top: 4px;
  color: #999;
}
</style>
